<html>
	<head>
		<meta
		  name="viewport"
		  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
		/>
		<link rel="stylesheet" href="./css/ybplayer.css">
		<style>
			body, html {
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
			}
			.h5player {
				width: 100%;
				height: 100%;
				background-color: black;
			}
			.error {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				display: flex;
				align-items: center;
				z-index: 3;
			}
			.error .icon {
				position: relative;
				width: 20px;
				height: 20px;
				border-radius: 20px;
				border: 2px solid #fff;
				color: #fff;
				text-align: center;
				font-weight: bold;
				font-family: 'Microsoft Yahei';
				margin-right: 10px;
				display: inline-block;
			}
			.error .text {
				color: #fff;
			}
			.loading{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				z-index: 3;
			    width: 150px;
			    height: 15px;
			}
			.loading span{
			    display: inline-block;
			    width: 15px;
			    height: 100%;
			    margin-right: 5px;
			    background: lightgreen;
			    -webkit-transform-origin: right bottom;
			    -webkit-animation: load 1s ease infinite;
			}
			.loading span:last-child{
			    margin-right: 0px; 
			}
			@-webkit-keyframes load{
			    0%{
			        opacity: 1;
			    }
			    100%{
			        opacity: 0;
			        -webkit-transform: rotate(90deg);
			    }
			}
			.loading span:nth-child(1){
			    -webkit-animation-delay:0.13s;
			}
			.loading span:nth-child(2){
			    -webkit-animation-delay:0.26s;
			}
			.loading span:nth-child(3){
			    -webkit-animation-delay:0.39s;
			}
			.loading span:nth-child(4){
			    -webkit-animation-delay:0.52s;
			}
			.loading span:nth-child(5){
			    -webkit-animation-delay:0.65s;
			}
			
			@-webkit-keyframes screen-show{
			    0%{
			        transform: translate(-50%, -50%) scale(0);
			    }
			    100%{
			        transform: translate(-50%, -50%) scale(1);
			    }
			}
			.screenshot {
				position: absolute;
				left: 50%;
				top: 50%;
				width: 100%;
				height: 100%;
				transform: translate(-50%, -50%);
				 -webkit-animation: screen-show .3s both;
				 text-align: center;
			}
			.screenshot-img {
				position: absolute;
				left: 50%;
				top: 50%;
				max-width: 60%;
				max-height: 60%;
				transform: translate(-50%, -50%);
			}
			.screenshot-btns {
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: absolute;
				left: 20%;
				right: 20%;
				bottom: 5%;
			}
			.screenshot-btn {
				width: 120px;
				height: 40px;
				border: 1px solid #fff;
				color: #fff;
				text-align: center;
				line-height: 40px;
				font-size: 20px;
			}
			.screenshot-close {
				width: 30px;
				height: 30px;
				border: 3px solid #fff;
				border-radius: 30px;
				position: absolute;
				right: 5%;
				top: 5%;
				transform: rotateZ(45deg);
			}
			.screenshot-close::before, .screenshot-close::after {
				content: '';
				position: absolute;
				left: 50%;
				top: 0;
				bottom: 0;
				transform: translateX(-50%);
				width: 3px;
				background-color: #fff;
			}
			.screenshot-close::after {
				transform: translateX(-50%) rotateZ(90deg);
			}
			.show {
				display: block;
			}
			.hide {
				display: none;
			}
		</style>
	</head>
	<title>h5播放器</title>
	<body>
		<div id="yb-video-content" class="h5player" onclick="videoClick()">
			<div id="yb-video-loading" class="loading hide">
			   <span></span>
			   <span></span>
			   <span></span>
			   <span></span>
			   <span></span>
			</div>
			<div id="yb-video-error" class="error hide">
				<span class="icon">!</span>
			   <span class="text">播放失败，点击重试</span>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="./js/uni-webview-js@1.5.4.js"></script>
	<script type="text/javascript" src="./js/hls.min.js"></script>
	<script type="text/javascript" src="./js/flv.min.js"></script>
	<script type="text/javascript" src="./js/ybbarrage.js"></script>
	<script type="text/javascript" src="./js/ybplayer.js"></script>
	<script type="text/javascript">
	  // var plusReady = function (callback) {
	  //     if (window.plus) {  
	  //         callback();  
	  //     } else {  
	  //         document.addEventListener('plusready', callback);  
	  //     }  
	  // };
	  // plusReady(function () {
	  //     alert(plus.runtime.appid);  
	  // });
	  // 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
	  // document.addEventListener('UniAppJSBridgeReady', function() {
	  //   uni.postMessage({
	  //       data: {
	  //           ready: true
	  //       }
	  //   });
	  // });
		var dp,screenshot,screenshotBox,screenshotImg;
		function switchVideo (arg) {
			var params = JSON.parse(decodeURIComponent(arg))
			var src = params.src || ''
			var poster = params.poster || ''
			var formats = params.formats || 'auto'
			var barrages = params.barrages || []
			var title = params.title || ''
			var prevBtnShow = params.prevBtnShow || false
			var nextBtnShow = params.nextBtnShow || false
			var controls = params.controls || false
			var autoplay = params.autoplay || false
			var loop = params.loop || false
			document.getElementById('yb-video-loading').setAttribute('class', 'loading show');
			if ( dp ) {
				dp.setConfig('poster', poster);
				dp.setConfig('formats', formats);
				dp.setConfig('title', title);
				dp.setConfig('prevBtnShow', prevBtnShow);
				dp.setConfig('nextBtnShow', nextBtnShow);
				dp.setConfig('controls', controls);
				dp.setBarrages(barrages);
				dp.setConfig('src', src);
			} else {
				dp = new YBPlayer({
					container: document.getElementById('yb-video-content'),
					src: src,
					title: title,
					poster: poster,
					formats: formats,
					prevBtnShow: prevBtnShow,
					nextBtnShow: nextBtnShow,
					autoplay: autoplay,
					loop: loop,
					controls: controls,
					barrageShow: barrages.length > 0,
					barrages: barrages,
					crossOrigin: 'anoymous',
					barrageConfig: {
						overlap: true,
						fontSize: 20
					}
				});
				dp.on('loadedmetadata', function (e) {
					document.getElementById('yb-video-loading').setAttribute('class', 'loading hide');
					uni.postMessage({
						data: {
							loadedmetadata: e
						}
					});
				});
				dp.on('play', function () {
					uni.postMessage({
						data: {
							play: true
						}
					});
				});
				dp.on('pause', function () {
					uni.postMessage({
						data: {
							pause: true
						}
					});
				});
				dp.on('waiting', function (e) {
					document.getElementById('yb-video-loading').setAttribute('class', 'loading show');
				});
				dp.on('playing', function (e) {
					document.getElementById('yb-video-loading').setAttribute('class', 'loading hide');
				});
				dp.on('error', function (e) {
					document.getElementById('yb-video-error').setAttribute('class', 'error show');
					document.getElementById('yb-video-loading').setAttribute('class', 'loading hide');
					document.getElementById('yb-video-error').onclick = function () {
						document.getElementById('yb-video-error').setAttribute('class', 'error hide');
						uni.postMessage({
							data: {
								reload: true
							}
						});
						document.getElementById('yb-video-error').onclick = null;
					}
				});
				dp.on('ended', function (e) {
					uni.postMessage({
						data: {
							ended: true
						}
					});
				});
				dp.on('fullscreenChange', function (e) {
					uni.postMessage({
						data: {
							fullscreenChange: e
						}
					});
					hideScreenshot();
				});
				dp.on('controlsChange', function (e) {
					uni.postMessage({
						data: {
							controlsChange: e
						}
					});
				});
				dp.on('captureFinish', function (e) {
					screenshot = e.base64;
					uni.postMessage({
						data: {
							captureFinish: e.base64
						}
					});
				});
				dp.on('prevBtnClick', function (e) {
					uni.postMessage({
						data: {
							prevBtnClick: true
						}
					});
				});
				dp.on('nextBtnClick', function (e) {
					uni.postMessage({
						data: {
							nextBtnClick: true
						}
					});
				});
			}
		}
		function play () {
			dp && dp.play();
		}
		function pause () {
			dp && dp.pause();
		}
		function stop () {
			dp && dp.stop();
			dp = null;
			document.getElementById('yb-video-loading').setAttribute('class', 'loading show');
		}
		function refresh () {
			dp && dp.refreshBarrage();
		}
		function setConfig (attribute, value) {
			dp && dp.setConfig(attribute, value)
		}
		function showScreenshot () {
			screenshotBox = document.createElement('DIV');
			screenshotBox.setAttribute('class', 'screenshot');
			screenshotBox.innerHTML = `
				<img src="${screenshot}" class="screenshot-img">
				<div class="screenshot-btns">
					<span class="screenshot-btn">分享截图</span>
					<span class="screenshot-btn">保存截图</span>
				</div>
				<div class="screenshot-close"></div>
			`;
			document.getElementById('yb-video-content').appendChild(screenshotBox);
			document.getElementsByClassName('screenshot-close')[0].onclick = function () {
				hideScreenshot();
			}
			document.getElementsByClassName('screenshot-btn');
			for ( let i = 0; i < document.getElementsByClassName('screenshot-btn').length; i++ ) {
				document.getElementsByClassName('screenshot-btn')[i].onclick = function () {
					if ( i == 0 ) {
						uni.postMessage({
							data: {
								shareScreenshot: true
							}
						});
					}
					if ( i == 1 ) {
						uni.postMessage({
							data: {
								saveScreenshot: true
							}
						});
					}
				}
			}
		}
		function hideScreenshot () {
			if ( screenshotBox ) {
				document.getElementsByClassName('screenshot-close')[0].onclick = null;
				for ( let i = 0; i < document.getElementsByClassName('screenshot-btn').length; i++ ) {
					document.getElementsByClassName('screenshot-btn')[i].onclick = null
				}
				screenshotBox && screenshotBox.remove();
				screenshotBox = null;
				uni.postMessage({
					data: {
						screenshotHide: true
					}
				});
			}
		}
		// window.onload = function () {
		// 	var bars = [];
		// 	for ( let i = 0; i < 1000; i++ ) {
		// 		for ( let j = 0; j < 5; j++ ) {
		// 			bars.push({
		// 				time: i,
		// 				text: '这是第' + (i) + '秒的第' + (j + 1) + '条弹幕',
		// 				color: '#fff',
		// 				fontSize: Math.ceil(Math.random() * 9) + 20
		// 			})
		// 		}
		// 	}
		// 	switchVideo('https://video.ondemandcn.com/98126187b7df4119996c1af834b934d6/d1f5cadf268f401c867746268d350081-10883b4fb481a0ae978efbf06ee4dbf6-ld.m3u8', '', '', JSON.stringify(bars), '')
		// }
	</script>
</html>